<script setup>
import {getNamespaceListHandler} from "../../api/namespace.js"
import {getClusterListHandler} from '../../api/cluster.js'
import {onBeforeMount, reactive, toRefs, ref ,computed } from "vue";
import {useRoute} from "vue-router";

const route = useRoute()
// 接受参数
const props=defineProps({
  showNamespace: {
    type: Boolean,
    default: true
  },
})

const  data = reactive({
  clusterList: [],
  namespaceList: [],
  clusterId: "",
  namespace: "",
})
// 定义两个事件，有用来处理当集群和namespace产生变化后，应该做那些处理
const emit = defineEmits(['clusterChangedRollback','namespaceChangedRollback'])

// 定义namespace发生变化需要做的事情
const namespaceChangedRollbackHandler = ()=>{
  emit('namespaceChangedRollback',data.clusterId,data.namespace)
}

// 定义集群发生变化需要做的事情
const clusterChangedRollbackHandler = ()=>{
  emit('clusterChangedRollback',data.clusterId)
}

// 获取namespace 列表
const getNamespaceList = async ()=>{
  console.log("查询namespace列表：",data.clusterId)
  await getNamespaceListHandler(data.clusterId).then((response)=>{
    console.log("集群列表中打印response",response.data.data.list)
    data.namespaceList = response.data.data.items
    console.log("打印items",data.namespaceList)
  })
  // 定义一个默认的namespace
  // 获取当前请求是否携带了namespace的参数
  const  curNamespace =route.query.namespace
  data.namespace = curNamespace?curNamespace:"default"
  // 回调
  namespaceChangedRollbackHandler()
}

// 查询集群列表
const getClusterList = async ()=>{
  await getClusterListHandler().then((res)=>{
    console.log("打印获取集群列表",res)
    data.clusterList = res.data.data.items
    console.log("打印获取集群列表data.clusterList",data.clusterList)
  })
}

// 当集群信息发生变化时
const  clusterChanged = ()=>{
  if (props.showNamespace){
    getNamespaceList()
  } else {
    clusterChangedRollbackHandler(data.clusterId)
  }
}
// 当namespace 发生变化时
const namespaceChanged = ()=>{
  namespaceChangedRollbackHandler()
}

// 在挂载时获取列表
// 使用vue组件生命周期，在组件被挂载之前执行动作
onBeforeMount(async ()=>{
  // 查询列表之前，要知道查询那个集群的节点列表
  // 1. 查询到集群列表
  // 2. 如果没有指定集群，则给一个默认值，进行获取集群列表
  // 3. 如果指定了集群，就直接查询当前的几点列表
  // 4. 切换了集群后重新获取节点列表
  // 5. 集群不可用，则不可以选

  // 获取集群列表
  await getClusterList()
  // 定义一个默认的集群
  const defaultClusterSelected = data.clusterList[0].id
  console.log("默认的集群是: ",defaultClusterSelected)

  // 获取当前请求是否携带了集群ID的参数
  const  curClusterId =route.query.clusterId  // curClusterId 有可能是空的
  data.clusterId = curClusterId?curClusterId:defaultClusterSelected

  // 查询namespace  如果传参展示namespace选择框则展示namespace
  clusterChanged()
})


// 解构data中的items数组
const {clusterList,clusterId,namespaceList,namespace} = toRefs(data)
</script>

<template>
    <el-select
        filterable
        v-model="clusterId"
        placeholder="选择集群ID"
        @change="getClusterList()"
        style="width:200px"
    >
      <el-option
          v-for="item in clusterList"
          :key="item.id"
          :label="item.id"
          :value="item.id"
          :disabled="item.status === 'InActive'"
      />
    </el-select>
    <el-select
        filterable
        v-if="props.showNamespace"
        v-model="namespace"
        placeholder="选择Namespace"
        @change="namespaceChanged()"
        style="width:200px; margin-left: 10px"
    >
      <el-option
          v-for="item in namespaceList"
          :key="item.metadata.name"
          :label="item.metadata.name"
          :value="item.metadata.name"
      />
    </el-select>
</template>

<style scoped>

</style>